<template>
	<view class="PaySuccesPage">
		<view class="PaySucces-content">
			<uni-icons type="checkbox-filled" size="90" color="#00c665"></uni-icons>
			<text class="Succes-text">支付成功</text>
			<text class="see">你可以在个人中心“全部订单”查看</text>
		</view>
		<view class="button-box">
			<view class="order-button" @click="toHotelOrderDetails">查看订单</view>
			<view class="back-button" @click="toHome">返回首页</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	const orderId = ref()
	onLoad((Option)=>{
		console.log('Option.orderId',Option.orderId);
		orderId.value = Option.orderId
	})
	const toHome = () => {
		uni.reLaunch({
			url: '/pages/home/index'
		});
	}
	const toHotelOrderDetails = () =>{
		uni.redirectTo({
			url:`/myselfSubpages/order/hotelOrderDetails/hotelOrderDetails?orderId=${orderId.value}`
		})
	}
</script>

<style lang="scss" scoped>
	.PaySuccesPage{
		width: 100%;
		max-height: 100vh;
		position: relative;
		.PaySucces-content{
			width: 100%;
			text-align: center;
			position: absolute;
			top: 15vh;
			text{
				display: block;
			}
			.Succes-text{
				font-weight: 600;
				font-size: 36rpx;
				margin-top: 20rpx;
				margin-bottom: 16rpx;
			}
			.see{
				font-size: 28rpx;
				color: #999;
			}
		}
		.button-box{
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 30rpx;
			position: absolute;
			top: 55vh;
			view{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 450rpx;
				height: 80rpx;
				border: 2rpx solid #000;
				border-radius: 100rpx;
				letter-spacing: 2rpx;
			}
			.back-button{
				background-color: #000;
				color: #fff;
			}
		}
	}
</style>

